// Small screens
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) {
    .main-title{
        padding-top: 20px;
        padding-bottom: 25px;
    }
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 30.063em) {
    section[role*="banner"]{
        h1{
            font-size: 2.5em;
            margin: -68px 0 0 -171px;
        }
    }
}
@media only screen and (min-width: 40.063em) {
    header{
        padding: 10px 0;
        min-height: 91px;
        .row{
            #main-logo{
                width: auto;
            }
        }
        #toggle-menu{
            display: none;
        }
        nav{
            position: static;
            background-color: $mainBlack;
            height: 70px;
            line-height: 70px;
            width: auto;
            border: none;
            margin-right: 15px;
            ul{
                list-style: none;
                float: right;
                margin: 0;
                li{
                    float: left;
                    margin: 0 6px;
                    color: $topBorder;
                    border-bottom: none;
                    a{
                        display: inline;
                        padding: 0;
                        &:hover{
                            color: $topBorder;
                            background-color: $mainBlack;
                        }
                    }
                    &.bull{
                        display: block;
                    }
                }
            }
        }
    }
    section[role*="banner"]{
        h1{
            font-size: 3.5em;
            margin: -87px 0 0 -242px;
        }
    }
    .services{
        .tabs.vertical{
            width: 40%;
        }
        .tabs-content.vertical{
            width: 60%;
            border-left: 1px solid #ccc;
        }
    }
} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */

@media only screen and (min-width: 64.78em) {
    section[role*="banner"]{
        .loader{
            padding-top: 450px;
            margin-bottom: 25px;
        }
    }
} /* min-width 1025px, large screens */
// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */